<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
    <!-- Vendor CSS Files -->
    <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/vendor/animate.css/animate.min.css" rel="stylesheet">
    <link href="../assets/vendor/icofont/icofont.min.css" rel="stylesheet">
    <link href="../assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="../assets/vendor/venobox/venobox.css" rel="stylesheet">
    <link href="../assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="../assets/vendor/aos/aos.css" rel="stylesheet">
    <!-- Template Main CSS File -->
    <link href="../assets/css/style.css" rel="stylesheet">
    <!-- 引入样式 -->
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/my.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <!--图表-->
    <script src="../plugins/echarts/echarts.js"></script>
</head>
<body>
    <header id="header" class="fixed-top ">
        <script src="../js/include.js"></script>
        <include src="header.html"></include>
    </header>

        <div id="app">
        <el-container>
            <el-aside  width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1', '2']" height="100px">
                    <el-submenu index="1">
                        <template slot="title" ><i class="el-icon-date"></i>地图分布</template>
                        <el-menu-item @click="changeUrl('mapAnalyze.html')" index="1-1-1"><span >地震点标记</span></el-menu-item>


                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title" ><i class="el-icon-location"></i>数据统计</template>

                        <el-submenu index="2-2">
                            <template slot="title">逐年统计</template>
                            <el-menu-item @click="changeUrl('time_depth.html')" index="2-2-1"><span>震源深度</span></el-menu-item>
                            <el-menu-item @click="changeUrl('time_strength.html')" index="2-2-2"><span>地震等级</span></el-menu-item>
                        </el-submenu>
                        <el-submenu index="2-3">
                            <template slot="title">季度统计</template>
                            <el-menu-item @click="changeUrl('quarter_depth.html')" index="2-3-1"><span>震源深度</span></el-menu-item>
                            <el-menu-item @click="changeUrl('quarter_strength.html')" index="2-3-2"><span>地震等级</span></el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe name="right" class="el-main" :src="nowUrl" width="100%" height="730px" frameborder="0"></iframe>
            </el-main>
        </el-container>
</div>

    <footer id="footer" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">
        <div class="footer-top">
            <div class="container">
                <div class="row">

                    <div class="col-lg-3 col-md-6 footer-links">
                        <h4>相关连接</h4>
                        <ul>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">www.xxxx.com</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">www.xxxx.com</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">www.xxxx.com</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">www.xxxx.com</a></li>
                            <li><i class="bx bx-chevron-right"></i> <a href="#">www.xxxx.com</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-3 col-md-6 footer-links">
                        <h4>我们提供的服务</h4>
                        <ul>
                            <li><i class="bx bx-chevron-right"></i>数据的处理</li>
                            <li><i class="bx bx-chevron-right"></i> 可视化结果展示</li>
                            <li><i class="bx bx-chevron-right"></i> 数据存储</li>
                            <li><i class="bx bx-chevron-right"></i> 相关查询</li>

                        </ul>
                    </div>

                    <div class="col-lg-3 col-md-6 footer-contact">
                        <h4>联系我们</h4>
                        <p>
                            巴布亚新几内亚<br>
                            俾斯麦<br>
                            东西不列颠<br><br>
                            <strong>Phone:</strong> +123456789<br>
                            <strong>Email:</strong> gfox@experience.com<br>
                        </p>

                    </div>

                    <div class="col-lg-3 col-md-6 footer-info">
                        <h3>关于本网站</h3>
                        <p>为了能够合理使用地震数据,就要实现地震数据的有效挖掘;对于数据有效的处理为地震的相关工作带来了较为积极的影响;主要流程为分析地震预报方法、寻找地震地区的相关性、获得数据、实现数据预处理,关联规则数据挖掘算法;然后对传统地震数据进行相关的分析。</p>
                    </div>

                </div>
            </div>
        </div>
    </footer><!-- End Footer -->
</body>

<!-- Vendor JS Files -->
<script src="../assets/vendor/jquery/jquery.min.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="../assets/vendor/venobox/venobox.min.js"></script>
<script src="../assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="../assets/vendor/counterup/counterup.min.js"></script>
<script src="../assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="../assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="../assets/vendor/aos/aos.js"></script>

<!-- Template Main JS File -->
<script src="../assets/js/main.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            nowUrl:"mapAnalyze.html"
        },
        methods:{
        changeUrl(url){
            this.nowUrl = url;
        }
        }
    })
</script>
</html>